<main>
  <mat-card *ngIf="this.promptsForm">
    <form [formGroup]="promptsForm" (ngSubmit)="setPrompts(promptsForm.value)">
      <div>
        <h1>Prompts</h1>
        <mat-form-field appearance="fill">
          <mat-label>Edit existing prompts</mat-label>
          <mat-select (selectionChange)="setSelectedPrompts($event.value)" name="device">
            <mat-option>Create new set of prompts</mat-option>
            <mat-option *ngFor="let p of prompts | keyvalue" [value]="p.key">{{p.key}}</mat-option>
          </mat-select>
        </mat-form-field>
        <button type="button" class="delete" mat-button *ngIf="selected" (click)="deletePrompts()"><mat-icon>delete</mat-icon></button>
        <mat-form-field>
          <mat-label>Prompts name</mat-label>
          <input matInput [formControl]="promptsForm.get('name')" />
          <mat-error *ngIf="promptsForm.get('name').hasError('required')">Prompts name is required</mat-error>
        </mat-form-field>
        <mat-form-field *ngFor="let name of promptsList.prompts">
          <mat-label>{{name}}</mat-label>
          <input matInput [formControl]="promptsForm.get('prompts_'+name)"  />
          <mat-error *ngIf="name && promptsForm.get('prompts_'+name)?.hasError('required')">{{ name }} is required</mat-error>
        </mat-form-field>
      </div>
      <div>
        <h2>Files</h2>
        <app-file-upload *ngFor="let name of promptsList.files" [name]="name" (getID)="setFile(name, $event)" [ID]="promptsForm.get('files_'+name).value"></app-file-upload><br>
        <button type="submit" [disabled]="!promptsForm.valid" mat-raised-button color="primary">Save</button>
      </div>
    </form>
  </mat-card>
</main>
